<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<!-- 载入文章头部页面，位置在/client文件夹下的header模板页面，模板名称th:fragment为header -->
<div th:replace="/client/header::header(null,null)"/>
<body>
<div class="am-g am-g-fixed blog-fixed index-page">
    <div class="am-u-md-8 am-u-sm-12">


        <div id="articles" th:fragment="articles">
            <!-- 文章遍历并分页展示 : 需要同学们手动完成，基本样式已经给出，请使用th标签及表达式完成页面展示 -->
            <div th:each="article:${articlePage.getContent()}">
                <article class="am-g blog-entry-article">

                    <div class="am-u-lg-6 am-u-md-12 am-u-sm-12 blog-entry-text">
                        <!-- 文章分类 -->
                        <span class="blog-color" style="font-size: 15px;"><a>默认分类</a></span>
                        <span>&nbsp;&nbsp;&nbsp;</span>
                        <!-- 发布时间 -->
                        <span style="font-size: 15px;" th:text="'发布于 '+ ${article.getCreated()}"/>
                        <h2>
                            <!-- 文章标题 -->
                            <div><a style="color: #0f9ae0;font-size: 20px;" th:text="${article.getTitle()}"/>
                            </div>
                        </h2>
                        <!-- 文章内容-->
                        <div style="font-size: 16px;" th:text="${article.getContent()}"/>
                    </div>
                </article>
                <input id="totalPages" type="text" th:value="${articlePage.getTotalPages()}" hidden>
                <input id="pageNumber" type="text" th:value="${articlePage.getPageable().getPageNumber()}" hidden>
            </div>
            <div>
                <ul style="float: bottom">
                    <li>
                        <span th:text="'总页数:'+${articlePage.getTotalPages()}"></span>
                        <span th:text="'第'+${articlePage.getPageable().getPageNumber()+1}+'页'"></span>
                        <span th:text="'总条数:'+${articlePage.getTotalElements()}"></span>

                    </li>
                    <!--首页 上一页 下一页 尾页-->
                    <button onclick="firstPage()">首页</button>
                    <span>&nbsp;&nbsp;&nbsp;</span>
                    <button onclick="previousPage()">上一页</button>
                    <span>&nbsp;&nbsp;&nbsp;</span>
                    <button onclick="nextPage()">下一页</button>
                    <span>&nbsp;&nbsp;&nbsp;</span>
                    <button onclick="lastPage()">尾页</button>

                </ul>
            </div>
        </div>

    </div>

    <!-- 博主信息描述 -->
    <div class="am-u-md-4 am-u-sm-12 blog-sidebar">
        <div class="blog-sidebar-widget blog-bor">
            <h2 class="blog-text-center blog-title"><span>子慕</span></h2>
            <img th:src="@{/assets/img/me.jpg}" alt="about me" class="blog-entry-img"/>
            <p>
                Java后台开发
            </p>
            <p>个人博客小站，主要发表关于Java、Spring、Docker等相关文章</p>
        </div>
        <div class="blog-sidebar-widget blog-bor">
            <h2 class="blog-text-center blog-title"><span>联系我</span></h2>
            <p>
                <a><span class="am-icon-github am-icon-fw blog-icon"></span></a>
                <a><span class="am-icon-weibo am-icon-fw blog-icon"></span></a>
            </p>
        </div>
    </div>

</div>
</body>
<!-- 载入文章尾部页面，位置在/client文件夹下的footer模板页面，模板名称th:fragment为footer -->
<div th:replace="/client/footer::footer"/>
</html>
<script>
    //点击首页按钮执行的首页数据查询，并进行数据刷新
    function firstPage() {
        $('#articles').load("/queryArticleByPage?page=0&size=3");
    }

    //点击上一页按钮执行的首页数据查询，并进行数据刷新
    function previousPage() {
        var pageNumber = Number($('#pageNumber').val()) - Number(1);
        $('#articles').load("/queryArticleByPage?page=" + pageNumber + "&size=3");
    }

    //点击下一页按钮执行的首页数据查询，并进行数据刷新
    function nextPage() {
        var totalPages = Number($('#totalPages').val());
        var pageNumber = Number($('#pageNumber').val()) + Number(1);
        if (Number(pageNumber) >= Number(totalPages)) {
            pageNumber = totalPages - 1;
        }
        $('#articles').load("/queryArticleByPage?page=" + pageNumber + "&size=3");
    }

    //点击尾页按钮执行的首页数据查询，并进行数据刷新
    function lastPage() {
        $('#articles').load("/queryArticleByPage?page=1&size=3");
    }
</script>